<template>
    <a-layout class="home">
        <a-layout-sider
                :theme="home.theme"
                style="width: 250px;"
                v-if="!home.isFullscreen"
        >
            <a-row
                    class="grid-demo"
                    style="height: 40px; padding-left: 5px"
                    align="center"
            >
                <a-col :span="16" align="center">
                    <a-input
                            placeholder="Search......"
                            v-model="home.search"
                            allow-clear
                    />
                </a-col>
                <a-col :span="4" align="center">
                    <a-button @click="home.add()">
                        <template #icon>
                            <icon-plus/>
                        </template>
                    </a-button>
                </a-col>
                <a-col :span="4" align="center">
                    <a-button @click="home.openFile()">
                        <template #icon>
                            <IconDriveFile/>
                        </template>
                    </a-button>
                </a-col>
            </a-row>
            <a-col flex="auto" style="height: calc(100% - 40px)">
                <div
                        v-if="fileList.length"
                        class="fileItem"
                        :class="home.selectFile?.path == item.path ? 'active' : ''"
                        v-for="item in fileList"
                        :style="item.isDel ? 'color:var(--color-text-4)' : ''"
                        @click="home.itemClick(item)"
                >
                    {{ item.name }}
                </div>

                <a-col v-else style="flex: 1">
                    <a-result
                            status="404"
                            subtitle="Not File"
                            class="cl-center"
                    >
                    </a-result>
                </a-col>


            </a-col>
        </a-layout-sider>
        <a-layout-content>
            <a-col v-show="home.selectFile" class="context">
                <a-row justify="space-between" align="center" class="context-header">
                    <h2 style="padding-left: 5px">{{ home.selectFile?.name }}</h2>
                    <a-radio-group
                            v-model="home.isEdit"
                            type="button"
                            style="margin: 2px 5px"
                    >
                        <a-radio :value="false">查看</a-radio>
                        <a-radio :value="true">编辑</a-radio>
                    </a-radio-group>
                </a-row>
                <MdEditor
                        ref="editorRef"
                        v-show="home.isEdit"
                        v-model="home.text"
                        :theme="home.theme"
                        preview-theme="github"
                        @onSave="home.onSave()"
                        :noPrettier="true"
                        :toolbars="toolbar"
                >
                    <template #defToolbars>
                        <NormalToolbar title="fullscreen" @onClick="home.handlerFullscreen()">
                            <template #trigger>
                                <svg class="md-editor-icon" aria-hidden="true">
                                    <use v-if="!home.isFullscreen" xlink:href="#md-editor-icon-fullscreen"></use>
                                    <use v-else xlink:href="#md-editor-icon-fullscreen-exit"></use>
                                </svg>
                            </template>
                        </NormalToolbar>
                    </template>


                </MdEditor>

                <MdPreview
                        v-show="!home.isEdit"
                        v-model="home.text"
                        :theme="home.theme"
                        preview-theme="github"
                ></MdPreview>
            </a-col>

            <a-col v-show="!home.selectFile" class="context" justify="center" style="flex: 1">
                <a-result
                        status="404"
                        subtitle="Not Select File"
                        class="cl-center"
                >
                </a-result>
            </a-col>
        </a-layout-content>
    </a-layout>
</template>

<script lang="ts" setup>
import {computed, onMounted, reactive, ref} from "vue";
import EventBus from "../../utils/eventBus";
import {Theme} from "@tauri-apps/api/window";
import {ExposeParam, MdEditor, MdPreview, NormalToolbar, ToolbarNames} from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import {Home, HomeInterFace} from "./homeMethods";

let editorRef = ref<ExposeParam>();

let handler = () => {
}
let toolbar: ToolbarNames[] = [
    'bold',
    'underline',
    'italic',
    '-',
    'title',
    'strikeThrough',
    'quote',
    'unorderedList',
    'orderedList',
    '-',
    'codeRow',
    'code',
    'table',
    '-',
    'revoke',
    'next',
    'save',
    '=',
    0,
    'preview',
    'catalog',
];

let home = reactive<HomeInterFace>(new Home());

let fileList = computed(() => {
    return home.fileList.filter((item) => item.name.match(home.search));
});

let init = async () => {
    home.fileList = await home.getFileList();
};


onMounted(() => {
    EventBus.on("themeChange", (data) => {
        home.theme = data as Theme;
    });
    init();
});
</script>

<style lang="scss" scoped src="./home.scss"></style>
